import React from 'react';
import { motion } from 'framer-motion';
import { CreditPackage } from '../services/credits';

interface CreditPackageCardProps {
  creditPackage: CreditPackage;
  index: number;
  isHighlighted: boolean;
  isLoading: boolean;
  isAuthenticated: boolean;
  onPurchase: (creditPackage: CreditPackage) => void;
}

const CreditPackageCard: React.FC<CreditPackageCardProps> = ({
  creditPackage,
  index,
  isHighlighted,
  isLoading,
  isAuthenticated,
  onPurchase,
}) => {
  return (
    <motion.div
      key={creditPackage.id}
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.1, delay: index * 0.1 }}
      whileHover={{ scale: 1.05, transition: { duration: 0.15, type: 'spring', stiffness: 100 } }}
      className={`h-full bg-white rounded-xl shadow-lg overflow-hidden ring-2 transition-all duration-150 ${isHighlighted ? 'ring-blue-500' : 'ring-transparent'}`}
      style={{ display: 'flex', flexDirection: 'column' }}
    >
      {isHighlighted && (
        <div className="bg-blue-500 text-white text-center py-2 font-medium">
          Most Popular
        </div>
      )}
      <div className="p-8 flex flex-col flex-1">
        <h3 className="text-2xl font-bold text-gray-900 mb-4">{creditPackage.name}</h3>
        <div className="flex items-baseline mb-6">
          <span className="text-5xl font-extrabold text-gray-900">${creditPackage.price}</span>
          <span className="ml-1 text-xl text-gray-500">/one-time</span>
        </div>
        <p className="text-lg font-medium text-blue-600 mb-6">
          {creditPackage.credits} credits
        </p>
        <ul className="space-y-4 mb-8 flex-1">
          {creditPackage.features.map((feature, i) => (
            <li key={i} className="flex items-center">
              <svg
                className="h-5 w-5 text-green-500 mr-2"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M5 13l4 4L19 7"
                />
              </svg>
              <span className="text-gray-700">{feature}</span>
            </li>
          ))}
        </ul>
        <button
          onClick={() => onPurchase(creditPackage)}
          disabled={isLoading || !isAuthenticated}
          className={`mt-auto w-full py-3 px-4 rounded-lg text-white font-medium transition-colors ${
            isHighlighted
              ? 'bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400'
              : 'bg-gray-800 hover:bg-gray-900 disabled:bg-gray-400'
          } disabled:cursor-not-allowed`}
        >
          {!isAuthenticated ? 'Please Login' : 'Purchase Now'}
        </button>
      </div>
    </motion.div>
  );
};

export default CreditPackageCard;